<div class="slick-initialized slick-slider" [class.slick-vertical]="nzVertical">
  <div
    #slickList
    class="slick-list"
    tabindex="-1"
    (keydown)="onKeyDown($event)"
    (mousedown)="pointerDown($event)"
    (touchstart)="pointerDown($event)"
  >
    <!-- Render carousel items. -->
    <div class="slick-track" #slickTrack>
      <ng-content></ng-content>
    </div>
  </div>
  <!-- Render dots. -->
  <ul
    class="slick-dots"
    *ngIf="nzDots"
    [class.slick-dots-top]="nzDotPosition === 'top'"
    [class.slick-dots-bottom]="nzDotPosition === 'bottom'"
    [class.slick-dots-left]="nzDotPosition === 'left'"
    [class.slick-dots-right]="nzDotPosition === 'right'"
  >
    <li
      *ngFor="let content of carouselContents; let i = index"
      [class.slick-active]="content.isActive"
      (click)="goTo(i)"
    >
      <ng-template [ngTemplateOutlet]="nzDotRender || renderDotTemplate" [ngTemplateOutletContext]="{ $implicit: i }">
      </ng-template>
    </li>
  </ul>
</div>

<ng-template #renderDotTemplate let-index>
  <button>{{ index + 1 }}</button>
</ng-template>
